<template>
	<div>
		<div>
			<!-- 正在学习 -->
			<h3 class="zzxx">正在学习</h3>
			<el-row :gutter="20" justify="center">
				<el-col :span="4">
					<div class="grid-content bg-purple" @click="this.$router.push('/classinfo')">
						<div class="grid-content bg-purple">
							<div class="picture">图片</div>
							<div class="rwhq">
								<!-- 人物后期 -->
								<p>人物后期</p>
								<p>2021.1.10-2022.4.1</p>
								</div>
					</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<div class="picture">图片</div>
						<div class="rwhq">
							<p>画报制作</p>
							<p>2021.1.10-2022.4.1</p>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<div class="picture">图片</div>
						<div class="rwhq">
							<p>电商广告</p>
							<p>2021.1.10-2022.4.1</p>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<div class="picture">图片</div>
						<div class="rwhq">
							<p>动漫绘画</p>
							<p>2021.1.10-2022.4.1</p>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20" justify="center">
				<el-col :span="10">
					<div class="grid-content1 bg-purple">
						<!-- 小导航栏 -->
						<div class="xdhl">
							行业趋势（人才需求）
						</div>
						<el-image :src="src" />
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content1 bg-purple">
						<!-- 小导航栏 -->
						<div class="xdhl">
							师生互动
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20" justify="center">
				<el-col :span="10">
					<div class="grid-content1 bg-purple">
						<!-- 小导航栏 -->
						<div class="xdhl">
							云计算必备知识 成都招聘
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content1 bg-purple">
						<!-- 小导航栏 -->
						<div class="xdhl">
							学习计划
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {
		toRefs
	} from 'vue'
	export default {
		setup() {
			const src =
				'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
			return {
				src
			}
		}
	}
</script>

<style lang="less" scoped>
	.xdhl {
		text-align: center;
		line-height: 50px;
		height: 50px;
		background-color: #62d2a2;
		box-shadow: 0px 1px 2px 1px rgb(31, 171, 137);
	}

	.zzxx {
		font-size: 16px;
		font-family: "Microsoft YaHei";
		color: rgb(15, 83, 66);
		margin-left: 16.5%;
	}

	.picture {
		display: inline;
		background-color: aquamarine;
		position: absolute;
		height: 80px;
		width: 5%;
	}

	.el-row {
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.el-row:last-child {
		// margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.grid-content {
		width: 85%;
		min-height: 80px;
		border-radius: 1px;
		background-color: rgb(215, 251, 232);
		opacity: 0.839;
		box-shadow: 0px 1px 2px 2px rgb(31, 171, 137);
	}

	.grid-content1 {
		width: 90%;
		min-height: 380px;
		border-radius: 1px;
		background-color: rgb(215, 251, 232);
		opacity: 0.839;
		box-shadow: 0px 1px 2px 2px rgb(31, 171, 137);
	}

	.rwhq {
		display: inline;
		font-size: 13px;
		font-family: "Microsoft YaHei";
		color: rgb(15, 83, 66);
		position: absolute;
		height: 80px;
		width: 15%;
	}

	.rwhq p {
		margin-left: 35%;
	}
</style>
